body {
    margin: 0px;
    font-family:Sans-serif;
    color: #44677B;
}

#serverErrorPopup {
    font-size: 16;
    font-weight: bold;
    color: #FF0000;
}

.waitPopup {
    font-size: 16;
    font-weight: bold;
    color: #FF0000;
}

#toolbar {
    background-color: #99CCFF;
    color: white;
    height: 25px;
    clear: both;
}

#sidebarViewToggle {
    right:0px;
    position:absolute;
    width: 25px;
    height: 25px;
}

#sidebarViewToggle.min {
    background: url(images/minimize_arrow.png) top left no-repeat;
}

#sidebarViewToggle.max {
    background: url(images/maximize_arrow.png) top left no-repeat;
}

#sidebarViewToggle a {
    display: block;
    height: 100%;
    width: 100%;
}

.tableMin {
    width: 25px;
    height: 25px;
    background: url(images/minimize_arrow.png) top left no-repeat;
}

.tableMin a {
    display: block;
    height: 100%;
    width: 100%;
}

.tableMax {
    width: 25px;
    height: 25px;
    background: url(images/maximize_arrow.png) top left no-repeat;
}

.tableMax a {
    display: block;
    height: 100%;
    width: 100%;
}

a:active, a:focus {
    outline: 0;
}

#content {
    background-color:white;
    width: 100%;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}

#header {
    position: relative;
    width: 75%;
    float: left;
}

#topControls {
    position: relative;
    width: 25%;
    top: 25px;
    float: left;
}

#closeButtonDiv {
    position: relative;
    float: right;
    width: 2%;
}

#refreshDiv {
    float: left;
}

#refreshTimeDiv {
    position: relative;
    float: right;
}

/* if width and height are changed, must also be changed in toggleFullScreen
 * in src/weathermap.js */
#map_canvas {
    width: 83%;
    height: 95%;
    float: left;
}

#altmap_canvas {
    font-size: 14;
    color: #FF0000;
    width: 83%;
    height: 95%;
    float:left;  
}

#sidebar {
    position: relative;
    width: 17%;
    height: 95%;
    min-height: 550px;
    float: left;
}

#sidebarBottom {
    width: 100%;
    position: relative;
}

#options {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border: 1px #0099CC solid;
}

h4 {
    margin:0px;
}

div.sidebarSection {
    width: 95%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    border: 1px #0099CC solid;
}

td.key {
    width: 20px;
}

#animationTime {
    font-size: 21;
    font-weight: bold;
    color: #00f;
}

input.playButton {
    color: #009900;
}

input.stepButton {
    color: #330099;
}

input.pauseButton {
    color: #330099;
}

input.stopButton {
    color: #990033;
}

#closeButton{
	background-color: #bb0000;
	font-size: 10px;
	color: #ffffff;
}

#playbackTable {
    font-size: 12;
}

#loadingPlaybackPopup {
    display: none;
    position: relative;
    background-color: #FFFFFF;
    border: 1px #FF0000 solid;
    font-size: 10;
    width: 100%;
    height: 60px;
    z-index: 100;
}

.sliderTable {
    font-size: 14;
}

.sliderValue {
    width: 36px;
}

.sliderTicks {
    position: relative;
    left: 16px;
    height: 20px;
    font-size: 12;
}

.tick {
    float: left;
}

/**
 * START - Metric Info
 * Formatting for the table of metric information
 */
table.metrics {
    font-size: 12;
    background-color: #b6d6e9;
}

td.separator {
    text-align:left;
    color: #000000;
    background-color: #FFFFFF;
}
td.number {
    text-align:right;
    color: #000000;
    background-color: #FFFFFF;
}

td.linkName {
    text-align:left;
    color: #000000;
    background-color: #b6d6e9;
    width: 30%;
}
/* END - Metric Info */

ul.noBullet {
    list-style-type: none;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 0px;
}

li {
    font-size: 12;
}

.LabeledMarker_markerLabel {
    text-align: center;
    background: url(images/text-repeat.png);
    border: 1px #999999 solid;
    white-space: nowrap;
    color: #000000;
    font-size: 13;
    font-weight: bold;
}

#ruler {
    visibility: hidden;
    white-space: nowrap;
}

#footer {
    width: 83%;
    float: left;
}

div.post {
    margin:5px;
}

.post h1,h2,h3,h4,h5,h6 {
    margin-bottom: 4px;
}

.post p {
    margin: 0px;
}

.indent {
    margin: 0px 0px 0px 15px;
}

fieldset {
    border: 1px #0099CC solid;
}

/*GMaps Stuff*/
#simple_example_window {
    width: 300px;
}

#simple_example_window_contents {
    background-color: #FFF;
}

#custom_info_window_red_beak {
    width: 28px;
    height: 38px;
    background: url('../examples/images/corners/red_beak.png') top left no-repeat transparent;
}

* html #simple_example_window_beak {
    /* Alpha transparencies hack for IE */
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../examples/images/corners/red_beak.png', sizingMethod='crop');
}

#simple_example_window_tl, #simple_example_window_tr, #simple_example_window_bl, #simple_example_window_br,
  #simple_example_window_t,#simple_example_window_l,#simple_example_window_r,#simple_example_window_b {
    background-color: #F00;
    height: 2px;
    width: 2px;
}
